{% extends 'base.html' %}
{% include 'link_css.html' %}
{% block content %}
<form class="col-lg-12" action="{% url 'getData' %}" method="get">
  <div class="input-group my-group text-center" style="margin: 0px 0px 100px;">
    <span class="input-group-btn">
      <button class="btn btn-default active" type="button">项目名称</button>
    </span>
    <select id="project" class="selectpicker form-control" data-live-search="true" name="goProject" onchange="getoption(this.value)">
       <option value="spike">spike</option>
      <option value="account">account</option>

    </select>
  </div>

  <div class="input-group my-group text-center">
    <span class="input-group-btn">
      <button class="btn btn-default active" type="button">运行环境</button>
    </span>
    <select id="env" class="selectpicker form-control" data-live-search="true" name="env"  onchange="getoption(this.value)">
      <option value="1">生产环境</option>
      <option value="2">测试环境</option>
    </select>
  </div>

  <div class="input-group my-group text-center">
    <span class="input-group-btn">
      <button class="btn btn-default active" type="button">运行环境</button>
    </span>
    <select id="services" class="selectpicker form-control" data-live-search="true" name="services">

    </select>

  </div>

<br/>
    <input id='sub' class="btn btn-danger" type="submit" value="Deploy" disabled="disabled">
</form>

<script>
    function getoption(val) {

        var project = document.getElementById("project").value;
        var env = document.getElementById("env").value;
        var select = document.getElementById("services");

        select.options.length = 0;   // del options

        $.getJSON("/asset/test2",{"project":project,"env":env},function (result) {
                console.log(result)
                for (i=0;i<result.length;i++) {
                var objOption = document.createElement("OPTION")
                objOption.value = result[i]
                objOption.text = result[i]
                select.add(objOption)
            }

        })
        $("#sub").attr("disabled",false)
    }
</script>
{% endblock %}
